<template>
	<div id="customer">
		<div class="table" v-show="parentDetailData.isTabelShow">
			<div class="container">
				<div class="handle-box">
					<div class="handle-box" style="float: left">
						<el-input v-model="searchcondition.realName" placeholder="名称" class="handle-input mr10"></el-input>
						<el-input v-model="searchcondition.tel" placeholder="电话" class="handle-input mr10"></el-input>
						<el-button type="primary" icon="search" @click="searchCustomer">搜索</el-button>
					</div>
					<div style="float: right">
						<el-button type="primary" @click="handleDetail(null,null)" icon="add">添加</el-button>
					</div>
				</div>
				<el-table stripe :data="tableData" border ref="multipleTable" v-loading="loading">
					<el-table-column label="头像" width="50">
						<template slot-scope="scope">
							<div class="portrait">
								<img :src="scope.row.headImg ? (globaldata.ftpUrl + scope.row.headImg) : portrait" alt="头像" />
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="realName" label="名称"></el-table-column>
					<el-table-column prop="companyName" label="投资机构"></el-table-column>
					<el-table-column prop="tel" label="手机号" width="100"></el-table-column>
					<el-table-column prop="careerCN" label="职称"></el-table-column>
					<el-table-column prop="city" label="城市" width="100"></el-table-column>
					<el-table-column label="状态" width="100">
						<template slot-scope="scope">
							<el-button class="status_btn no-hover" v-if="scope.row.status=='trade_user'" size="mini" type="warning">{{scope.row.statusCN}}</el-button>
							<el-button class="status_btn no-hover" v-else-if="scope.row.status=='trade_fid'" size="mini" type="success">{{scope.row.statusCN}}</el-button>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="150">
						<template slot-scope="scope">
							<el-button size="small" type="primary" @click="handleDetail(scope.$index, scope.row)">编辑</el-button>
							<el-button type="danger" size="small" @click="handleSetStatus(scope.$index, scope.row)" v-if="scope.row.status =='trade_user'">禁用</el-button>
							<el-button size="small" type="danger" @click="handleSetStatus(scope.$index, scope.row)" v-if="scope.row.status == 'trade_fid'">启用</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50]" :page-size="searchcondition.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		<detail ref="detail" :userType="userType" :parentDetailData="parentDetailData" :id="id" v-on:close="handleClose"></detail>
	</div>
</template>

<script>
	import Vue from 'vue';
	import $ from 'jquery';
	import detail from './detail'
	import service from '@/js/common/customerservice.js'
	export default {
		components: {
			detail
		},
		data() {
			return {
				portrait: require('@/assets/portrait.png'), //默认头像
				searchcondition: {
					realName: '',
					level: '',
					tel: '',
					status: '',
					pageNum: 1,
					pageSize: 10
				},
				parentDetailData: {
					isTabelShow: true
				},
				id: 0,
				tableData: [],
				total: 0,
				priDialogFormVisible: false,
				loading: true,
				userType: ''
			}
		},
		mounted() {
			this.userType = sessionStorage.getItem('userType');
			let param_arr = ['trade_status']
			this.tool.getDirByKey(this, param_arr).then(() => {
				service.getPageData(this);
			});
		},
		computed: {
			data() {
				const self = this;
				return self.tableData.filter(function(d) {
					return d;
				});
			},
			trade_status() {
				return this.$store.state.trade_status;
			}
		},
		methods: {
			handleCurrentChange(val) { //翻页
				this.searchcondition.pageNum = val;
				service.getPageData(this);
			},
			handleSizeChange(val) { //每页数量
				this.searchcondition.pageSize = val;
				service.getPageData(this);
			},
			searchCustomer() {
				this.searchcondition.pageNum = 1;
				service.getPageData(this);
			},
			selectChange(e) {
				service.getPageData(this);
			},
			handleDetail(index, row) {
				service.showDetail(this, row);
			},
			handleClose() {
				service.getPageData(this);
			},
			changeType() {
				this.searchcondition.pageNum = 1;
				service.getPageData(this);
			},
			handleSetStatus(index, row) {debugger;
				service.updateStatus(this, row.id, row.status);
			}
		}
	}
</script>

<style lang="less">
	/*@import '../../../../less/commonClass.less';*/
	
	#customer {
		.imgs {
			width: 80px;
			height: 100px;
			vertical-align: middle;
		}
		.portrait {
			width: 30px;
			height: 30px;
			border-radius: 50%;
			overflow: hidden;
			img:extend(.oneLine) {
				width: 100%;
				height: 100%;
			}
		}
		.el-table {
			table-layout: fixed;
			.cell {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap !important;
				word-break: keep-all !important;
			}
		}
	}
</style>